<template>
  <div style="height: 100%">
    <el-card style="width: 100%; height: 64px; padding: 4px">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @submit.prevent="onSubmit"
      >
        <el-form-item label="关键词">
          <el-input
            v-model="formInline.keyWord"
            placeholder="用户名、手机号、微信号"
            clearable
            @keyup.enter="onSubmit"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table-box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="avatar" label="头像" width="160" align="center">
          <template #default="scope">
            <el-avatar :size="50" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="ID" label="ID" width="160" align="center" />
        <el-table-column
          fixed
          prop="nick_name"
          label="昵称"
          width="240"
          align="center"
        />

        <el-table-column
          prop="wechat"
          label="微信号"
          width="160"
          align="center"
        />
        <el-table-column
          prop="points"
          label="积分"
          width="160"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="160"
          align="center"
        />
        <el-table-column prop="created_time" label="注册时间" align="center" />

        <el-table-column
          prop="group_name"
          label="所在群组"
          width="160"
          align="center"
        />
        <el-table-column label="操作" width="240" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="showPrivateMsg(scope.row)"
              >私信</el-button
            >

            <el-button
              disabled
              type="primary"
              size="small"
              @click="handleClick"
            >
              禁言
            </el-button>

            <!-- <el-button type="danger" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-box">
      <el-pagination
        background
        size="small"
        layout="prev, pager, next"
        :total="total_count"
        :page-size="page_size"
        :current-page="current_page"
        @current-change="currentChange"
      />
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      :title="'私信给: ' + currentuser.nick_name"
      width="500"
    >
      <el-form :model="form">
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.content"
            autocomplete="off"
          />
        </el-form-item>
        <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="Please select a zone">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="sendMsg"> 发送 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getUserList, sendPrivateMsg } from "@/api/user";
import { ElMessage } from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";

interface User {
  user_id: string;
  ID: string;
  nick_name: string;
}

const current_page = ref(1);
const page_size = ref(20);
const total_count = ref(0);
const dialogFormVisible = ref(false);
const formLabelWidth = "90px";
const currentuser = ref<User>({
  user_id: "",
  ID: "",
  nick_name: ""
});

const resetForm = () => {
  formInline.keyWord = "";
  load_usrs();
};

const formInline = reactive({
  keyWord: ""
});

const handleClick = () => {
  console.log("click");
};

const form = reactive({
  content: ""
});

const currentChange = (page: number) => {
  console.log("currentChange", page);
  current_page.value = page;
  load_usrs();
};

const showPrivateMsg = (user: User) => {
  currentuser.value = user;
  nextTick(() => {
    dialogFormVisible.value = true;
  });
  console.log("showPrivateMsg", user);
  // 跳转到私信页面
  // window.open(`/private-msg?user_id=${user.ID}`, "_blank");
};

const onSubmit = () => {
  console.log("submit!");
  load_usrs();
};

const load_usrs = () => {
  getUserList({
    page: current_page.value,
    page_size: page_size.value,
    keyWord: formInline.keyWord
  }).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.records;
      total_count.value = res.data.total_count;
    }
  });
};

onMounted(() => {
  load_usrs();
});

const sendMsg = () => {
  console.log("sendMsg", form);
  dialogFormVisible.value = false;
  sendPrivateMsg({
    to_id: currentuser.value.user_id,
    content: form.content,
    message_type: "text",
    image_urls: []
  }).then(res => {
    console.log("sendMsg", res);
    if (res.code === 200) {
      // 发送成功
      ElMessage.success("发送成功");
    } else {
      // 发送失败
      ElMessage.error("发送失败");
    }
  });
  // 发送消息
  // window.open(`/private-msg?user_id=${user.ID}`, "_blank");
};

const tableData = ref([]);
</script>

<style lang="scss" scoped>
.table-box {
  height: calc(100vh - 260px);
  overflow-y: auto;
}

.pager-box {
  border-top: solid 1px #eee;
  height: 90px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
